// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use './boxes' as *;

$default-spacing: 10px;

@mixin message-box {
  @include default-border-radius();
  @extend .flexrow;
  flex-wrap: wrap;
  color: $dark-black;
  padding: $default-spacing;
  margin-bottom: 18px;
  // overrides custom line-height set by semantic ui that breaks message-boxes
  line-height: normal;

  .message-box-content {
    @extend .flexrow;
  }

  .message-text {
    flex-grow: 1;
    align-self: center;
    font-size: 1.2em;

    p:first-child {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }

    ul,
    ol {
      margin-left: 1em;
    }

    &.normal-size {
      font-size: 1em;
    }
  }

  &.large-icon {
    .icon {
      font-size: 2.7em;
      margin-bottom: $default-spacing;
    }
  }

  .icon {
    flex-shrink: 0;
    font-size: 1.5em;
    color: $gray;
    margin-right: 0.5em;
  }

  .message-box-footer {
    @include single-box-shadow(
      $light-gray,
      0,
      $default-spacing,
      $default-spacing,
      -$default-spacing,
      inset
    );
    flex: 1 100%;
    margin: $default-spacing -#{$default-spacing} -#{$default-spacing} -#{$default-spacing};
    padding: $default-spacing;
  }
}

@mixin message-tag {
  @include default-border-radius();
  padding: 0 4px;
}

.info-message {
  color: #3a87ad;
  background-color: #d9edf7;
  padding: 8px 14px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #bce8f1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.error-message {
  color: #a76766;
  background-color: #f2dede;
  padding: 8px 14px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #a76766;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.warning-message {
  color: #be9056;
  background-color: #fff3e2;
  padding: 8px 14px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #be9056;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.success-message {
  color: #638864;
  background-color: #dbeed3;
  padding: 8px 14px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #638864;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.info-message-box,
.message-message-box {
  // Needed for default category 'message' of flash() in flashed_messages.html
  @include message-box();
  background-color: #fafafa;
  border: 1px solid #ddd;

  .icon {
    @include icon-before('icon-info');
  }

  .message-box-footer {
    background: darken(#fafafa, 5%);
  }
}

.highlight-message-box {
  @include message-box();
  background-color: $light-blue;
  border: 1px solid $dark-blue;

  .icon {
    @include icon-before('icon-lamp');
    color: $dark-blue;
  }

  .message-box-footer {
    background: darken($light-blue, 5%);
  }
}

.success-message-box {
  @include message-box();
  background-color: #eefaee;
  border: 1px solid #cdc;

  .icon {
    @include icon-before('icon-checkmark');
  }

  &::before {
    color: #cdc;
  }

  .message-box-footer {
    background: darken(#eefaee, 5%);
  }
}

.warning-message-box {
  @include message-box();
  background-color: #fff3e2;
  border: 1px solid #be9056;

  .icon {
    @include icon-before('icon-warning');
    color: #be9056;
  }

  .message-box-footer {
    background: darken(#fff3e2, 5%);
  }
}

.error-message-box {
  @include message-box();
  background-color: $light-red;
  border: 1px solid $dark-red;

  .icon {
    @include icon-before('icon-disable');
    color: $dark-red;
  }

  .message-box-footer {
    background: darken($light-red, 5%);
  }
}

.danger-message-box {
  @include message-box();
  background-color: $light-red;
  border: 1px solid $dark-red;

  .icon {
    @include icon-before('icon-warning');
    color: $dark-red;
  }

  .message-box-footer {
    background: darken($light-red, 5%);
  }
}

.error-message-tag {
  @include message-tag();
  background-color: $red;
  color: $light-gray;
  margin-left: $default-spacing;
}

.error-message-underline {
  @include border-bottom($red);
}
